<template>
<!--出账-->
  <div class="out-of-account">
    <div style="padding:10px;margin:10px;background:#fff">
      <el-select v-model="searchForm.projectId" @change="proSelectChange" placeholder="选择项目" filterable clearable>
        <el-option v-for="item in options.projects" :keys="item.id" :label="item.projectName" :value="item.id" />
      </el-select>
      <el-select v-model="searchForm.contractId" placeholder="选择合同" filterable clearable>
        <el-option v-for="item in options.contracts" :keys="item.id" :label="item.contractNo" :value="item.id"/>
      </el-select>
      <el-date-picker
        style="margin-left: 8px"
        v-model="searchForm.time"
        unlink-panels
        value-format="timestamp"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button @click="toSearch" type="primary" icon="el-icon-search" size="small" style="margin: 4px 0 0 6px" >查询</el-button>
    </div>
    <div style="padding:10px;margin:10px;background:#fff">
      <div>
        <el-button :disabled="searchForm.contractId?false:true" @click="openAddInfoDialog" icon="el-icon-plus" type="success" size="small">新增</el-button>
        <a-table
          :data-source="moneyItems"
          size="small"
          :rowKey="record => record.id"
          :loading="moneyItemsLoading"
          :scroll="moneyItems.length > 0 ?{ x: 600}:{}"
          style="margin-top: 1em"
        >
          <a-table-column :width="60" align="center" key="money" title="金额" data-index="money" />
          <a-table-column :width="60" align="center" key="operator" title="付款人" data-index="operator" />
          <a-table-column :width="60" align="center" key="paymentName" title="付款名目" data-index="paymentName" />
          <a-table-column :width="60" align="center" key="time" title="付款时间" data-index="time" >
            <template slot-scope="text, record">
              {{dateTimeFormat(text)}}
            </template>
          </a-table-column>
          <a-table-column  align="center" :width="140" key="action" title="操作">
            <template slot-scope="text, record, index">
              <el-button @click.native.stop="openEditDialog(record)" icon="el-icon-edit" type="success" size="mini" style="padding: 7px 10px;">修改</el-button>
              <el-button @click.native.stop="deleteMoneyInfo(record, index)" icon="el-icon-delete" type="danger" size="mini" style="padding: 7px 10px;">删除</el-button>
            </template>
          </a-table-column>
        </a-table>
      </div>
    </div>
    <!--      合同显示布局区域   -->

    <!--修改支付信息模态框-->
    <el-dialog v-el-drag-dialog title="修改信息" :visible.sync="editMoneyInfoDialog.visible" width="30%">
      <el-form ref="editMoneyInfoDialogForm" :model="editMoneyInfoDialog.form" status-icon>
        <el-form-item label="支付金额" label-width="80px" size="small" prop="money">
          <a-input-number  v-model="editMoneyInfoDialog.form.money" :precision="2" :step="1" ></a-input-number>
        </el-form-item>
        <el-form-item label="支付人" label-width="80px" size="small" prop="operator">
          <el-input v-model="editMoneyInfoDialog.form.operator" :precision="2" :step="1"/>
        </el-form-item>
        <el-form-item label="支付名目" label-width="80px" size="small" prop="paymentName">
          <el-input v-model="editMoneyInfoDialog.form.paymentName" :precision="2" :step="1"></el-input>
        </el-form-item>
        <el-form-item label="支付时间" label-width="80px" size="small" prop="time">
          <el-date-picker v-model="editMoneyInfoDialog.form.time"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="editMoneyInfoDialog.visible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="editMoneyInfo">确 定</el-button>
      </div>
    </el-dialog>
    <!--付款信息展示模态框-->
    <el-dialog v-el-drag-dialog title="付款记录" :visible.sync="showMoneyDialog.visible" style="width: 1400px;height: 1800px">
      <div style="padding-bottom: 10px">
      <el-button @click="openAddInfoDialog" icon="el-icon-plus" type="success" size="mini" >新增</el-button>
      </div>
      <a-table
        :data-source="moneyItems"
        size="small"
        :rowKey="record => record.id"
        :loading="moneyItemsLoading"
        :scroll="moneyItems.length > 0 ?{ x: 600}:{}"
      >
        <a-table-column :width="60" align="center" key="money" title="金额" data-index="money" />
        <a-table-column :width="60" align="center" key="operator" title="付款人" data-index="operator" />
        <a-table-column :width="60" align="center" key="paymentName" title="付款名目" data-index="paymentName" />
        <a-table-column :width="60" align="center" key="time" title="付款时间" data-index="time" >
          <template slot-scope="text, record">
            {{dateTimeFormat(text)}}
          </template>
        </a-table-column>
        <a-table-column  align="center" :width="140" key="action" title="操作">
          <template slot-scope="text, record, index">
            <el-button @click.native.stop="openEditDialog(record)" icon="el-icon-edit" type="success" size="mini" style="padding: 7px 10px;">修改</el-button>
            <el-button @click.native.stop="deleteMoneyInfo(record, index)" icon="el-icon-delete" type="danger" size="mini" style="padding: 7px 10px;">删除</el-button>
          </template>
        </a-table-column>
      </a-table>
    </el-dialog>
    <!--付款信息登记模态框-->
    <el-dialog v-el-drag-dialog title="付款信息登记" :visible.sync="addMoneyDialog.visible" width="400px">
      <el-form ref="addMoneyDialogForm" :model="addMoneyDialog.form" status-icon>
        <el-form-item label="支付金额" label-width="80px" size="small" prop="money">
          <a-input-number v-model="addMoneyDialog.form.money" :precision="2" :step="1" ></a-input-number>
        </el-form-item>
        <el-form-item label="支付人" label-width="80px"  size="small" prop="operator">
          <a-input v-model="addMoneyDialog.form.operator" :precision="2" :step="1" ></a-input>
        </el-form-item>
        <el-form-item label="支付名目" label-width="80px" size="small" prop="money">
          <a-input v-model="addMoneyDialog.form.paymentName" :precision="2" :step="1" ></a-input>
        </el-form-item>
        <el-form-item label="支付时间" label-width="80px" size="small" prop="money">
          <el-date-picker
            v-model="addMoneyDialog.form.time"
            value-format="timestamp"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="addMoneyDialog.visible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="addMoneyInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import "@/styles/auto-style.css";
  import { getAction, postActionByJson, postActionByQueryString } from "@/api/manage";
  import { dateTimeFormat } from "@/utils/format";
  import { beforeUpload, uploadStatusChange } from '@/utils/upload'
  import elDragDialog from "@/directive/el-drag-dialog";

  export default {
    directives: { elDragDialog },

    watch: {
      activeKey(key) {
        console.log(key);
      },
    },
    created() {
      this.loadPurchaseProjects()
      this.loadContracts()
    },
    mounted() {
      var that = this;
      // <!--把window.onresize事件挂在到mounted函数上-->
      window.onresize = () => {
        return (() => {
          that.windowHeight = document.documentElement.clientHeight  - 130; // 高
        })()
      };
    },
    data() {
      const fileUploadUrl = process.env.VUE_APP_BASE_API + 'file/uploadCache'

      return {
        options: {
          projects: [],
          contracts: [],
        },
        activeKey: ['1'],
        header: "n",
        fileNum: 1,
        fileList: [],
        fileUploadUrl,
        ImgShowDialog: {
          visible: false
        },
        editMoneyInfoDialog: {
          form: {},
          visible: false
        },
        addMoneyDialog: {
          form: {},
          visible: false
        },
        showMoneyDialog: {
          visible: false
        },
        moneyItemsLoading: false,
        moneyItems: [],
        imgItems: [],
        imgItemsLoading: false,
        contractAttribute: {contractName:''}, // 合同订单信息
        purchaseProjects: [], // 采购项目
        searchForm: {}, // 搜索form数据源
        windowHeight: document.documentElement.clientHeight - 130, // 页面高度
        margin: 0, // left-sider 移动距离
      }
    },
    methods: {
      addMoneyInfo(){
        this.addMoneyDialog.form.accountId = this.searchForm.contractId
        getAction('/purchase/actualAccount/addMoneyInfo',this.addMoneyDialog.form)
        .then(resp => {
          this.$message.success("新增"+resp.data+"条信息成功！")
          this.addMoneyDialog.visible = false
          this.addMoneyDialog.form = {}
          this.toSearch()
        })
      },
      openAddInfoDialog(){
        this.addMoneyDialog.visible = true;
      },
      openImgShowDialog(){
        this.ImgShowDialog.visible = true
        getAction('/stock/invoice/findInvoice',{contractId: this.addMoneyInfo.contractId})
          .then(resp =>{
            this.imgItems = resp.data
          })
      },
      editMoneyInfo(){
        getAction('/purchase/actualAccount/editMoneyInfo',this.editMoneyInfoDialog.form)
          .then(resp => {
            this.$message.success(resp.message)
            this.toSearch()
            this.editMoneyInfoDialog.visible = false
          })
      },
      openEditDialog(record){
        let form = this.moneyItems.filter(item=>item.id==record.id)[0]||{}
        this.editMoneyInfoDialog.form = Object.assign({}, form)
        this.editMoneyInfoDialog.visible = true
      },
      deleteMoneyInfo(recode){
        getAction('/purchase/actualAccount/deleteMoneyInfo',{id: recode.id})
          .then(resp =>{
            this.$message.success(resp.message+"已删除"+resp.data+"条数据")
            this.toSearch()
          })
      },
      showAddDialog() {
        this.addMoneyDialog.visible = true
      },
      /**
       * 点击查询事件
       */
      toSearch() {
        // 查询合同订单信息
        let form = Object.assign({}, this.searchForm)
        if (form.time&&form.time.length>0) {
          form.startTime = form.time[0]
          form.endTime = form.time[1]
        }
        this.$delete(form,'time')
          getAction('/purchase/actualAccount/selectMoneyInfo',form)
            .then(resp =>{
              if (resp.data){
                this.moneyItems = resp.data
              }
            })
      },
      /**
       * left-sider 收缩事件
       */
      changeMargin(){
        this.margin = this.margin == 0?-460-14:0
      },
      /**
       * 加载下拉框所有采购项目
       */
      loadPurchaseProjects() {
        getAction("/purchase/project/findAllLike")
          .then((resp) => {
            this.options.projects = resp.data
          })
      },
      // 查询合同列表
      loadContracts(proId) {
        if(proId){
          getAction('/purchase/contract/findByProjectId', { projectId: proId })
            .then(resp => {
              this.options.contracts = resp.data
            })
        }else {
          getAction('/purchase/contract/findByProjectId')
            .then(resp => {
              this.options.contracts = resp.data
            })
        }
      },
      proSelectChange(id) {
        this.$delete(this.searchForm,'contractId')
        this.loadContracts(id)
      },
      dateTimeFormat,
      beforeUpload,
      uploadStatusChange
    }
  }
</script>

<style lang="scss" scoped>
  .out-of-account {

    .left-layout{
      margin-top: 1em;
      margin-right: 1em;
    }
    /deep/.el-divider--horizontal {
      marign: 8px 0!important;
    }
    /deep/.el-form-item__content{
      height:auto;
      line-height:32px;
      margin-left:90px!important
    }
    .left-container {
      background: #fff;
      position: relative;
      .sider-btn {
        cursor: pointer;top:18px;position: absolute;font-size: 28px;color:#73767b;
      }
      .el-icon-s-fold {
        right: 0px;
      }
      .el-icon-s-unfold {
        top: -6px;
        right: -57px;
        border: 1px dashed #d5d5d5;
        background: #fff;
      }
      .attr-row {
        .el-col {
          text-align: center;
          span {
            cursor: pointer;
          }
        }
      }
    }

  }
  /deep/.el-picker-panel {
    z-index: 2900!important
  }
</style>
